<template>
    <div class="listxplx">
        <div class="ph">
            <a href="#">
                <img
                src="https://image.10street.cn/image/9f/7a/9f7a4cbc7ccc279d74f239da6b0a809a.png"
                alt
                >
            </a>
        </div>
        <div class="shop">
            <div class="shopxp">
                <ul>
                    <li v-for="data in listxplx_data.itemData" :key ='data.commonId'  v-on:click='todetail(data.commonId)'>
                        <div class="shopph">
                            <img
                                :src="data.imageUrl"
                                alt
                            >
                            <p>新品上市</p>
                        </div>
                        <div class="shopxx">
                            <div class="shopname">
                                {{data.goodsName}}
                            </div>
                            <div class="shopprice">
                                <span> ￥{{data.goodsPrice}}</span>
                                <div>
                                    会员价：
                                    <em>
                                        ￥
                                        <i>{{data.vipPrice}}</i>
                                    </em>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['listxplx_data'],
    methods: {
        todetail(index){
      this.$emit('commonId',index)
    }
    },
    data(){
        return {
            foods : {}
        }
    },
    watch:{
        'listxplx_data'(){
            // console.log(this.listxplx_data)
        }
    },
    mounted () {
        
        // console.log(1)
  
        // console.log(listxplx_data)
    }

}
</script>


<style lang="stylus">
.listxplx 
    margin-left: 0.1rem;
    .ph 
        height: 1.5rem;
        margin-left: -0.1rem;
        img 
            width 100%
    .shop 
        height 7.36rem
        display: flex;
    .shopxp 
        ul 
            display flex
            flex-wrap: wrap;
            li 
                background #fff
                width: 31%;
                margin-right: 2%;
                .shopph 
                    height: 1.25rem;
                    position: relative;
                    img 
                        width: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                    p   
                        width: 1.13rem;
                        height 0.15rem
                        text-align center
                        font-size 0.14rem
                        color #ffffff
                        background #FF4E44
                        position: absolute;
                        bottom 0.0333rem
                        line-height: 0.15rem;
                .shopxx
                    width 1.13rem
                    height  0.63rem  
                    padding-left 0.1rem 
                    padding-right 0.1rem 
                    .shopname
                        font-size: 0.1rem;
                        color: #333;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    .shopprice
                        span 
                            color: #333;
                            font-size: 0.07rem;
                            display: block;
                        div
                            color: #333;
                            font-size: 0.07rem;
                            overflow: hidden;
                            word-break: break-all;
                            em
                                color: red;
</style>

